<!DOCTYPE HTML>
<html th:with="title='编辑房产汽车',module='/js/app/common/uploadvideo.js'">
<head th:include="fragments/UEheader :: header">
<style type="text/css">
</style>
</head>
<body id="app">
	<div class="page-container">
		<form class="form form-horizontal" id="form">
			<input type="hidden" name="id" v-model="houseCar.id" />
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					商家名称：
				</label>
				<div class="formControls col-xs-4 col-sm-4">
					<input type="text" class="input-text radius size-L" v-model="houseCar.adBusinessName" id="adBusinessName" name="adBusinessName">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					房产/汽车名称：
				</label>
				<div class="formControls col-xs-4 col-sm-4">
					<input type="text" class="input-text radius size-L" v-model="houseCar.adName" id="adName" name="adName">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">视频：</label>
				<input type="hidden" id="video" name="adVideo">
				<div class="col-xs-8 col-sm-8 col-xs-offset-4 col-sm-offset-4" style="margin: 0;">
					<div id="uploader-demo">
						<!--用来存放item-->
						<div id="videoList" class="uploader-list"></div>
						<div id="videoPicker" class="btn btn-primary size-L radius">选择文件</div>
					</div>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					二维码：
				</label>
				<input type="hidden" id="adQrcode" name="adQrcode">
				<div class="col-xs-2 col-sm-2 col-xs-offset-4 col-sm-offset-4" style="margin: 0;">
					<div id="uploader-demo">
						<!--用来存放item-->
						<div id="QrCodefileList" class="uploader-list"></div>
						<div id="QrCodefilePicker" class="btn btn-primary size-L radius ">选择图片</div>
					</div>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">轮播图：</label>
				<input type="hidden" id="slideImage" name="adSlideImage">
				<div class="col-xs-8 col-sm-8 col-xs-offset-4 col-sm-offset-4" style="margin: 0;">
					<div id="uploader-demo">
						<!--用来存放item-->
						<div id="fileLists" class="uploader-list"></div>
						<div id="filePickerList" class="btn btn-primary size-L radius ">选择图片</div>
						<input type="button" class="btn btn-primary size-L radius" id="btn" value="开始上传">
					</div>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					3D全景链接：
				</label>
				<div class="formControls col-xs-4 col-sm-4">
					<input type="text" class="input-text radius size-L" v-model="houseCar.adUrl" id="adUrl" name="adUrl">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					选择模板：
				</label>
				<div class="formControls col-xs-4 col-sm-3">
					<select class="input-text size-L" v-model="houseCar.appTemplate.id" id="appTemplate" name="appTemplate">
					</select>
				</div>
			</div>
<!-- 			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3"> 房产汽车描述： </label>
				<div class="formControls col-xs-8 col-sm-8">
					加载编辑器的容器
					<script id="container" name="adIntroduction" style="width: 1100px; height: 350px" type="text/plain"></script>
				</div>
			</div> -->
			<div class="row cl">
				<div class="text-c">
					<input class="btn btn-primary size-L radius mr-10" type="submit" value="提交">
					<input class="btn btn-danger size-L radius" type="button" onclick="closeWin()" value="关闭">
				</div>
			</div>
		</form>
	</div>

	<script type="text/javascript">
	function delImg(num) {
		$('#' + num).remove();
	}
	var app = new Vue({
		el : '#app',
		data : {
			houseCar : []
		}
	});
		function closeWin() {
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		}
		//获取当前营销详情
		function get() {
			var id = getIdFromUrl();
			$.ajax({
				type : "POST",
				url : '/manager/ads/get/' + id,
				beforeSend : function() {
				},
				complete : function() {
				},
				error : function(request) {
					alert("Connection error");
				},
				success : function(result) {
					if (result.status == 0) {
						var data = result.data;
						//轮播图处理
						if (data.adSlideImage != "") {
							var imageList = data.adSlideImage.split(",");
							for (var i = 0; i < imageList.length; i++) {
								$("#fileLists").append("<img id='" + i + "' src='" + imageList[i] + "' width='100' onclick='delImg(" + i + ")' height='100'>");
							}
						}
						//二维码处理
						if (data.adImage != "") {
							$("#QrCodefileList").append("<img src='"+data.adQrcode+"'  width='100' height='100'>");
							$("#adQrcode").val(data.adQrcode);
						}
						//视频处理
						if (data.adVideo != null) {
							$("#videoList").append("<a href='"+data.adVideo+"' width='100' height='100'>" + data.adVideo + "</a>");
							$("#video").val(data.adVideo);
						}
						app.houseCar = data;
					}
				}
			});
		}
		/*
		 * 查询
		 */
		function adsQuery() {
			var tip = layer.load(0, {
				shade : false
			});
			$.ajax({
				type : "POST",
				url : '/manager/appTemplate/findAll',
				data : {
					search_EQ_templateType_templateTypeSn : "003"
				},
				beforeSend : function() {
				},
				complete : function() {
					layer.close(tip);
				},
				error : function(request) {
					layer.alert("系统错误");
				},
				success : function(result) {
					if (result.status == 0) {
						var data = result.data;
 						for ( var i = 0; i < data.length; i++) {
							$("#appTemplate").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
						}
 						get();
					} else {
						sessionCheckTimeOut(result);
					}
				}
			});
		}
		$(function() {
			adsQuery();
			//var ue = UE.getEditor('container');
			$("#form").validate({
				rules : {
					adBusinessName : {
						required : true
					},
					adName : {
						required : true
					}
				},
				onkeyup : false,
				focusCleanup : true,
				success : "valid",
				submitHandler : function(form) {
					var imglist = "";
					$.each($("#fileLists img"), function() {
						//当图片上传成功时才进行拼接
						if ($(this).attr('src').indexOf("http") == 0) {
							imglist += $(this).attr('src') + ",";
						}
					});
					//填充叠加后轮播图url至隐藏域并去除结尾多余的逗号
					$("#slideImage").val(imglist.substring(0, imglist.length - 1));
					var data = $('#form').serialize();
					$.ajax({
						type : "POST",
						url : '/manager/ads/update',
						data : data,
						beforeSend : function() {

						},
						complete : function() {
						},
						error : function(request) {
							layer.alert("系统出错！");
						},
						success : function(data) {
							if (data.status == 0) {
								refreshUParentList();
								layer.alert(data.message, function() {
									var index = parent.layer.getFrameIndex(window.name);
									parent.layer.close(index);
								});
							} else {
								layer.alert(data.message);
							}
						}
					});
				}
			});
		});
	</script>
</body>
</html>